<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
    <title>大学课程在线学习平台</title>
    <link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://bootswatch.com/4/materia/bootstrap.min.css" >
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>   <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


    <style>

        .p1{
            font-family: MingLiU;
            font-size: 17px;
            padding-top: 10px;
            color:#000000;
        }

        .btn1{

        }

        a:hover {color: #539201}	/* 鼠标移动到链接上 */
        a:active {color: #0000FF}	/* 选定的链接 */

    </style>
</head>
<body>
    <div calss="container">
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <h2 class="navbar-brand" style="padding-left: 15px;" href="#">大学生课程在线学习系统>课程学习</h2>
    </nav>
    <div class="row" style="height: 200px;padding-left: 30px;">
        <div class="col-sm-3">
            <img src="/cyb/upload/img/${course.courseName}/${course.courseName}.jpg" style="padding-top: 30px;padding-left: 30px;height: 200px;">
        </div>
        <div class="col-sm-6">
            <h1 style="padding-left: 30px;padding-top: 50px; font-family: SimHei"><strong>${course.courseName}</strong></h1>
            <div class="row">
                <h3 style="padding-left: 50px;padding-top: 70px;color: rgba(24,24,24,0.57);">讲师:${course.courseTeacher}</h3>
                <h3 style="padding-left: 70px;padding-top: 70px;color: rgba(24,24,24,0.57);">课时:${course.courseHour}</h3>
            </div>
        </div>
    </div>
    <div style="background-color: #f4f4f4">
        <hr class="my-4">
        <div class="row">
            <div class="col-sm-7" style="padding-left: 90px">
                <c:forEach items="${course.chapterList}" var="chapter">
                    <div class="card" style="margin-top: 20px">
                        <div class="card-body">
                        <h2 class="card-title" style="font-family: SimHei"><strong>${chapter.chapterName}</strong></h2>
                            <c:forEach items="${chapter.sectionList}" var="section">
                                <div class="card-text" style="padding-left: 20px;">
                            <a  class="p1" target="_blank" href="/cyb/video/playVideo?courseId=${course.courseId}&chapterId=${chapter.chapterId}&sectionId=${section.sectionId}">${section.sectionName}</a>
                        </div
                            </c:forEach>
                    </div>
                    </div>
                </c:forEach>
                <div ></div>
            </div>
            <div class="col-sm-5">
                <div class="well" style="margin-right: 40px;margin-top: 50px;background-color: #D1EEEE">
                    <div>
                        <h4 style="font-family: STHeiti"><strong>视频下载区</strong></h4>
                        <h6 style="padding-top: 6px;">点击即可下载</h6>
                        <c:forEach items="${course.chapterList}" var="chapter">
                            <div>
                                <div class="btn-group" role="group" aria-label="Button group with nested dropdown" style="padding-top: 20px;padding-left: 20px;">
                            <button type="button" class="btn btn-secondary btn1">${chapter.chapterName}</button>
                            <div class="btn-group" role="group">
                                <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
                                <div class="dropdown-menu" aria-labelledby="btnGroupDrop1" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 51px, 0px);">
                                    <c:forEach items="${chapter.sectionList}" var="section">
                                        <a class="dropdown-item" href="/cyb/video/videoDownload?videoName=${section.sectionName}.mp4&courseName=${course.courseName}">${section.sectionName}</a>
                                    </c:forEach>
                                </div>
                            </div>
                        </div>
                            </div>
                        </c:forEach>
                    </div>
                </div>
                <div class="well" style="margin-right: 40px;margin-top: 50px;background-color: #FFE4C4">
                    <div>
                        <h4 style="font-family: STHeiti"><strong>PPT下载区</strong></h4>
                        <h6 style="padding-top: 6px;">点击即可下载</h6>
                        <c:forEach items="${course.chapterList}" var="chapter">
                            <div>
                                <div class="btn-group" role="group" aria-label="Button group with nested dropdown" style="padding-top: 20px;padding-left: 20px;">
                                <button type="button" class="btn btn-secondary btn1">${chapter.chapterName}</button>
                                <div class="btn-group" role="group">
                                    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
                                    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 51px, 0px);">
                                        <c:forEach items="${chapter.sectionList}" var="section">
                                            <a class="dropdown-item" href="/cyb/ppt/pptDownload?pptName=${section.sectionName}.ppt&courseName=${course.courseName}">${section.sectionName}</a>
                                        </c:forEach>
                                    </div>
                                </div>
                            </div>
                            </div>
                        </c:forEach>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


</body>
</html>

